<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <canvas id="canvas" height="600" width="700"></canvas>
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    // 创建一个 image对象:
    var img = new Image();
    // 绑定图片的src:
    img.src = "http://panpan.dapanna.cn//image-20221008162339344.png";
    // 当图片加载完之后运行：
    img.onload = function () {
      // 创建图案:
      var ptrn = ctx.createPattern(img, 'repeat');
      ctx.fillStyle = ptrn;
      ctx.fillRect(0, 0, 700, 600);
    }
  </script> -->
  <canvas id="canvas" height="600" width="700"></canvas>
  <img id="img" src="http://panpan.dapanna.cn//image-20221008162339344.png" alt="" style="display:none;">
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    const img = document.getElementById('img')
    // 当图片加载完之后运行：
    img.onload = function () {
      // 图片加载完以后
      // 创建图案
      var ptrn = ctx.createPattern(img, 'repeat');
      ctx.fillStyle = ptrn;
      ctx.fillRect(0, 0, 700, 600);
    }
  </script>
</body>

</html>